<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>珈云管理端</title>
		<link rel="shortcut icon" href="../../favicon.ico">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css">
		<link rel="stylesheet" href="../../styles/login.css">
		<link rel="stylesheet" href="../../styles/icon/iconfont.css" />
		<style>
			.body {
				min-width: 1366px;
			}
		</style>
	</head>

	<body>
		<div class="login" id="login-app">
			<div class="login-box">
				<img src="../../images/login/login-l.png" alt="">
				<div class="login-form">
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
						<div class="login-form-title">
							<img src="../../images/login/logo.png" style="width:139px;height:42px;" alt="" />
						</div>
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
								maxlength="20" prefix-icon="iconfont icon-user" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" type="password" placeholder="密码"
								prefix-icon="iconfont icon-lock" maxlength="20" @keyup.enter.native="handleLogin" />
						</el-form-item>
						<el-form-item style="width:100%;">
							<el-button :loading="loading" class="login-btn" size="medium" type="primary"
								style="width:100%;" @click.native.prevent="handleLogin">
								<span v-if="!loading">登录</span>
								<span v-else>登录中...</span>
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<script src="../../js/request.js"></script>
		<script src="../../js/validate.js"></script>
		<script src="../../api/login.js"></script>

		<script>
			new Vue({
				el: '#login-app',
				data() {
					return {
						loginForm: {
							username: 'admin',
							password: '123456'
						},
						loading: false
					}
				},
				computed: {
					loginRules() {
						const validateUsername = (rule, value, callback) => {
							if (value.length < 1) {
								callback(new Error('请输入用户名'))
							} else {
								callback()
							}
						};
						const validatePassword = (rule, value, callback) => {
							if (value.length < 6) {
								callback(new Error('密码必须在6位以上'))
							} else {
								callback()
							}
						};
						return {
							'username': [{
								'validator': validateUsername,
								'trigger': 'blur'
							}],
							'password': [{
								'validator': validatePassword,
								'trigger': 'blur'
							}]
						}
					}
				},
				created() {
					// loginApi(this.loginForm)
					// axios.post({
					// 	url: "http://localhost:8080/admin/login",
					// 	data: this.loginForm
					// }).then(res => {
					// 	console.log(res);
					// })
				},
				methods: {

					async handleLogin() {
						let res = await loginApi(this.loginForm);//等待ajax获得响应后在往下指定，res  =  response.data
						if (String(res.code) === '1') {
							// 栈内存，存在浏览器上数据，类似于session
							window.localStorage.setItem('userInfo',JSON.stringify(res.data));
							window.location.href= '/back/index.html';
						}
						// this.$refs.loginForm.validate(async (valid) => {
						// 	if (valid) { //true 前台正则表达式满足
						// 		this.loading = true;
						// 		let res = await loginApi(this.loginForm);//等待ajax获得响应后在往下指定，res  =  response.data
						// 		if (String(res.code) === '1') {
						// 		    // 栈内存，存在浏览器上数据，类似于session
						// 		  window.localStorage.setItem('userInfo',JSON.stringify(res.data));
						// 		  window.location.href= '/back/index.html';
						// 		} else {
						// 		  this.$message.error(res.msg);
						// 		  this.loading = false;
						// 		}
						//
						// 	}
						// })
					}
				}
			})
		</script>
	</body>

</html>
